<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <title>模态框</title>
            <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
            <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
      </head>
      <body>
            <div class="container">
                  <h2>模态框实例</h2>
                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框1</button>
                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">打开小模态框2</button>
                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal3">打开大模态框3</button>
            </div>

            <!-- 模态框 -->
            <div class="modal fade" id="myModal">
                  <div class="modal-dialog">
                        <div class="modal-content">
                              <!-- 模态框头部 -->
                              <div class="modal-header">
                                    <h4 class="modal-title">模态框头部</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                              </div>
                              <!-- 模态框主体 -->
                              <div class="modal-body">
                                    模态框内容
                              </div>
                              <!-- 模态框底部 -->
                              <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                              </div>
                        </div>
                  </div>
            </div>

            <div class="modal fade" id="myModal2">
                  <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                              <!-- 模态框头部 -->
                              <div class="modal-header">
                                    <h4 class="modal-title">模态框头部</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                              </div>
                              <!-- 模态框主体 -->
                              <div class="modal-body">
                                    模态框内容
                              </div>
                              <!-- 模态框底部 -->
                              <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                              </div>
                        </div>
                  </div>
            </div>

            <div class="modal fade" id="myModal3">
                  <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                              <!-- 模态框头部 -->
                              <div class="modal-header">
                                    <h4 class="modal-title">模态框头部</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                              </div>
                              <!-- 模态框主体 -->
                              <div class="modal-body">
                                    模态框内容
                              </div>
                              <!-- 模态框底部 -->
                              <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                              </div>
                        </div>
                  </div>
            </div>
      </body>
</html>